<template lang="html">
  <div class="box">
      <div class="header">
          <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
              <el-input placeholder="请输入运营商名称" v-model="keyword" style="width: 420px;">
                <el-button slot="append" style="width: 120px;" @click="search()">搜索</el-button>
              </el-input>
          </el-form>
      </div>

      <div class="body" v-loading="loading">
          <el-table :data="tableData.list" border style="width: 100%">
              <el-table-column label="运营商名称" prop="company" align="center" width=""></el-table-column>
              <el-table-column label="负责人" prop="leader" align="center" width=""></el-table-column>
              <el-table-column label="电话" prop="phone" align="center" width=""></el-table-column>
              <el-table-column label="运营库存" align="center" width="">
                  <template slot-scope="scope">
                      <el-button type="primary" @click="getAgentMate(scope.row)" size="mini" plain>查看详情</el-button>
                  </template>
              </el-table-column>
              <el-table-column label="物料补充记录" align="center" width="">
                  <template slot-scope="scope">
                      <el-button type="primary" @click="agentMateApply(scope.row)" size="mini" plain>查看详情</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </div>
      <div class="page_box">
          <el-pagination class="page" layout="prev, pager, next"
            @current-change="onpage" :current-page="currentPage" :page-count='tableData.rows' >
          </el-pagination>
      </div>

      <el-dialog :visible.sync="dialogVisible" width="1200px">
          <el-table :data="agentMateApplyData.list">
              <el-table-column align="center" property="sm_name" label="供应商"></el-table-column>
              <el-table-column align="center" label="物料名称">
                  <template slot-scope="scope">
                      <p v-for="i,k in scope.row.detail" :key="k">{{i.materiel}}</p>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="申请数量">
                  <template slot-scope="scope">
                      <p v-for="i,k in scope.row.detail" :key="k">{{i.num}}</p>
                  </template>
              </el-table-column>
              <el-table-column align="center" property="create_time" label="申请时间"></el-table-column>
              <el-table-column align="center" property="audit_time" label="通过时间"></el-table-column>
              <el-table-column align="center" property="over_time" label="完成时间"></el-table-column>
          </el-table>
          <div class="page_box">
              <el-pagination class="page" layout="prev, pager, next"
                @current-change="onpage2" :page-count='agentMateApplyData.rows' >
              </el-pagination>
          </div>
      </el-dialog>

      <el-dialog :visible.sync="dialogVisible2" width="1200px" style="height:90vh">
          <div class="">
            <span>地区：</span>
            <el-tag size="medium" class="tags" v-for="i,k in agentMateData.area" :key="k">{{i.name}}</el-tag>
          </div>
          <el-table :data="agentMateData.mate">
              <!-- <el-table-column align="center" label="地区">
                  <template slot-scope="scope">
                      <p v-for="i,k in agentMateData.area" :key="k">{{i.name}}</p>
                  </template>
              </el-table-column> -->
              <el-table-column prop="name" align="center" label="物料名称">
                <!-- <template slot-scope="scope">
                    <p v-for="i,k in agentMateData.area" :key="k">{{agentMateData.mate[k] ? agentMateData.mate[k].name : '-'}}</p>
                </template> -->
              </el-table-column>
              <el-table-column prop="ration" align="center" label="期初配给">
                <!-- <template slot-scope="scope">
                    <p v-for="i,k in agentMateData.area" :key="k">{{agentMateData.mate[k] ? agentMateData.mate[k].ration : '-'}}</p>
                </template> -->
              </el-table-column>
              <el-table-column prop="materiel_stock" align="center" label="剩余库存">
                <!-- <template slot-scope="scope">
                        <p v-for="i,k in agentMateData.area" :key="k">{{agentMateData.mate[k] ? agentMateData.mate[k].materiel_stock : '-'}}</p>
                </template> -->
              </el-table-column>
              <el-table-column prop="open_stock" align="center" label="授信库存">
                <!-- <template slot-scope="scope">
                        <p v-for="i,k in agentMateData.area" :key="k">{{agentMateData.mate[k] ? agentMateData.mate[k].materiel_stock : '-'}}</p>
                </template> -->
              </el-table-column>
          </el-table>
      </el-dialog>

  </div>
</template>

<script>
export default {
    data(){
      return {
        token: this.$store.state.user.token3,
        // 所有数据
        tableData: [],
        agentMateData: [],
        agentMateApplyData: [],
        keyword: '',
        loading: false,
        currentPage: 1,
        dialogVisible: false,
        dialogVisible2: false,
        currentRow:null
      }
    },
    created(){
        this.mateAgentList()
    },
    methods:{
      // 搜索
      search(){
        this.mateAgentList()
      },
      // 列表数据
      mateAgentList(page = 1){
        this.loading = true;
        this.currentPage = page;
        this.$http3.mateAgentList({
          token: this.token,
          key: this.keyword,
          page:page
        }).then(res=>{
          this.tableData =
          res.data.code == 1?
          res.data.data: []
          this.loading = false
        })
      },
      // -点击运营库存调用
      getAgentMate(e){
        this.agentMateData = []
        this.$http3.getAgentMate({
          token: this.token,
          aid: e.aid
        }).then(res=>{
          this.agentMateData =
          res.data.code == 1?
          res.data.data: []
          this.dialogVisible2 = true
        })
      },
      // 物料补充记录
      agentMateApply(e,page=1){
        this.agentMateApplyData = []
        this.currentRow = e
        this.$http3.agentMateApply({
          token: this.token,
          aid: this.currentRow.aid,
          page:page
        }).then(res=>{
          this.agentMateApplyData =
          res.data.code == 1?
          res.data.data: []
          this.dialogVisible = true
        })
      },
      onpage2(p){
        this.agentMateApply(this.currentRow,p)
      },
      onpage(p){
        this.mateAgentList(p)
      },

    }
}
</script>

<style lang="css" scoped>
@import "../../my-style/app.css";
/deep/ .el-input-group__append, .el-input-group__prepend{
  background-color: #3498E9;
  border: none;
  color: white;
}
.tags{
  margin-right: 10px;
}
.preview-img{
  display: block;
  width: 100%;
  height: 30px;
}
.header{
  margin-bottom: 10px
}
.page_box{
  text-align: center;
}
</style>
